/* 全局样式重置 */
* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

/* 页面最外层容器，居中显示 */
.box {
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    display: flex;
    background-color: #F6F6F6;

    header {
        height: 100px;
        background-color: pink;
    }

    main {
        flex: 1;
        height: 80%;
        .center {
            width: 100%;
            height: 1000px;
          
            border-radius: 8px;
            margin-bottom: 500px;

            .loaction {
                height: calc(100% - 100px);
                padding: 10px;
                box-sizing: border-box;
                overflow: auto;
                /* 每条消息项 */
                .message-item {
                    width: 100%;
                    margin: 0 auto;
                    margin-bottom: 15px;
                }

                /* 消息居左显示（其他用户的消息） */
                .flex-left {
                    display: flex;
                    justify-content: flex-start;
                }

                /* 消息居右显示（当前用户的消息） */
                .flex-right {
                    display: flex;
                    justify-content: flex-end;
                }

                /* 用户头像样式 */
                .avatar {
                    // width: 100px;
                    height: 100px;
                    line-height: 100px;
                    border-radius: 50%;
                    overflow: hidden;
                    // background: #fafafa;
                    background-color: #E5E6E8;
                    text-align: center;
                    min-width: 100px;
                }

                /* 消息内容样式 */
                .message-content {
                    min-height: 50px;
                    background-color: #23363C;
                    color: #fff;
                    border-radius: 20px;
                    padding: 10px;
                    line-height: 80px;
                    margin: 10px;
                }


            }

            /* 发送框的样式 */
            .send-box {
                height: 100px;
                display: flex;
                justify-content: space-around;
                // background-color: green;
                background-color: #fff;

                /* 消息输入框样式 */
                .message-input {
                    height: 70px;
                    width: 80%;
                    line-height: 70px;
                    // border: none;
                    background-color: #F2F2FA;
                    border-radius: 50px;
                    margin-top: 15px;
                    padding: 20px;
                    border: none;
                }



                /* 发送按钮样式 */
                .send-btn {
                    width: 150px;
                    height: 70px;
                    line-height: 60px;
                    text-align: center;
                    border: none;
                    background-color: #B4CDF7;
                    border-radius: 50px;
                    margin-left: -142px;
                    margin-top: 15px;
                }

                .add-icon {
                    font-size: 50px;
                    margin: 30px 20px;
                }

                .photo-icon {
                    font-size: 50px;
                    margin: 25px 20px;
                }

                .add-icon {
                    font-size: 50px;
                    margin: 25px 20px;
                }


            }

        }

        .uploaded-image {
            max-width: 250px;
            max-height: 250px;
            margin-top: 10px;
        }
    }

    footer {
        height: 150px;
        // background-color: pink;
    }
}